<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>customer/manage</title>
<link rel="stylesheet" href="../jqgrid/jqueryUI/jquery-ui.css">
<link rel="stylesheet" href="../jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" href="../laydate/theme/default/laydate.css">
<script type="text/javascript" src="../jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jqgrid/jqueryUI/jquery-ui.js"></script>
<script type="text/javascript" src="../jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../jqgrid/js/grid.locale-cn.js"></script>
<script type="text/javascript" src="../laydate/laydate.js"></script>
<script type="text/javascript">
	var options = {
		// Ajax请求地址,即获取数据的地址
		url : 'getlist',
		editurl : 'edit',
		// 表头
		caption : '用户管理',
		// 设置为交替行表格,默认为false
		altRows : true,
		// 根据父容器
		autowidth : true,
		// 如果设置则按此设置为主，如果没有设置则按colModel中定义的宽度计算
		width : 'auto',
		// 高度，表格高度。可为数值、百分比或'auto'
		height : 'auto',
		// 从服务器端返回的数据类型，默认xml
		datatype : 'json',
		// 提交方式，默认为GET
		mtype : 'post',
		//  每页显示记录数
		rowNum : 10,
		// 用于改变显示行数的下拉列表框的元素数组
		rowList : [ 3, 5, 10, 25, 50 ],
		prmNames : {
			search : 'search'
		},
		// 排序列的名称，此参数会被传到后台
		sortname : 'id',
		//  确定是否显示总的记录条数
		viewrecords : true,
		// 这个参数指定了jqGrid页脚显示位置，定义翻页用的导航栏
		pager : '#pager',
		emptyrecords : '暂无数据，请添加',
		// 如何解析从Server端发回来的json数据
		jsonReader : {
			repeatitems : false,
			id : 'id'
		},
		// 显示左侧的序号
		rownumbers : true,
		// 多选框
		multiselect : true,
		// 在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效
		multiboxonly : true,
		colModel : [
		// index 表示传到服务器端用来排序用的列名称
		// width 为列宽度
		// align 为对齐方式
		// sortable 表示是否可以排序
		/* {name:'id',label:'序号',index:'id',align:'center',width:50,sorttype:'int'}, */
		{
			name : 'username',
			label : '登录名',
			index : 'username',
			align : 'center',
			// width : 40,
			sorttype : 'text',
			editable : true,
			edittype : 'text'
		}, {
			name : 'name',
			label : '名字',
			index : 'name',
			align : 'center',
			// width : 40,
			sorttype : 'text',
			editable : true,
			edittype : 'text'
		}, {
			name : 'remarks',
			label : '备注',
			index : 'remarks',
			align : 'center',
			// width : 40,
			sorttype : 'text',
			editable : true,
			edittype : 'text'
		} ]
	}
	$(function() {
		$('#list2').jqGrid(options);
		/* $('#list2').jqGrid('inlineNav', "#pager"); */

		$("#list2").jqGrid('navGrid', '#pager', {
			edit : false,
			edittext : "编辑",
			add : true,
			addtext : "新增",
			del : true,
			deltext : "删除",
			search : true,
			searchtext : "搜索",
			// view : true,
			// viewtext : "查看",
			refresh : true,
			refreshtext : "刷新"
		// closeOnEscape : true

		}, {
			// 修改
			// 用ese键退出
			closeOnEscape : true,
			closeAfterEdit : true
		}, {
			// 新增
			closeOnEscape : true,
			closeAfterAdd : true,
			modal : true,
			url : 'add',
			savekey : [ true, 13 ]
		// top : 50,
		// left : 350
		}, {
			closeOnEscape : true
		}, {
			closeAfterSearch : true,
			closeAftreReset : true,
			closeOnEscape : true,
			multipleSearch : true
		});
		$("#list2").jqGrid('inlineNav', '#pager', {
			add : false,
			edit : true,
			edittext : '编辑',
			save : true,
			savetext : '保存',
			cancel : true,
			canceltext : '取消'
		});
	});
</script>
</head>
<body>
	<table id="list2"></table>
	<div id="pager"></div>
</body>
</html>